<template>
  <BaseDialog
    :model-value="modelValue"
    :title="title"
    width="600px"
    @update:model-value="$emit('update:modelValue', $event)"
    @close="$emit('close')"
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item v-for="field in fields" :key="field.prop" :label="field.label">
        <template v-if="field.type === 'textarea'">
          <div class="textarea-content">{{ data[field.prop] }}</div>
        </template>
        <template v-else>
          {{ data[field.prop] }}
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </BaseDialog>
</template>

<script setup lang="ts">
  import BaseDialog from './BaseDialog.vue'
  import { ElDescriptions, ElDescriptionsItem } from 'element-plus'

  interface Field {
    prop: string
    label: string
    type?: 'input' | 'textarea'
  }

  interface Props {
    modelValue: boolean
    title: string
    data: Record<string, any>
    fields: Field[]
  }

  const props = defineProps<Props>()

  const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'close'): void
  }>()
</script>

<style scoped>
  .textarea-content {
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
  }
</style>
